<template>
    <el-dialog
      title="视频监控"
      v-model="videoOpen"
      width="800px"
      height="600px"
      append-to-body
      @close="videoClose"
      class="video_box"
    >
      <!--视频窗口展示-->
      <div id="playWnd" class="playWnd">
        <videoPlayer
          class="vjs-custom-skin videoPlayer"
          ref="videoplayer"
          :playsinline="true"
          width="800px"
          height="600px"
          :options="playerOptions"
          customEventName="changed"
        >
        </videoPlayer>
      </div>
    </el-dialog>
  </template>
   
  <script>
   
  import { videoPlayer } from "vue-video-player";
  import 'video.js/dist/video-js.css'
  export default {
    name: "HkVideo",
    components: {
      videoPlayer,
    },
    props:['url'],
    data() {
      return {
        videoOpen: false,
        playerOptions: {
          width: "800px",
          height: "600px",
          language: "zh-CN",
          muted: true,// 默认情况下将会消除任何音频
          autoplay: true,// 如果true,浏览器准备好时开始回放。
          controls: false, //不显示暂停、声音、进度条组件
          loop: true, // 视频一结束就重新开始。
          sources: [
            {
              type: "video/mp4",
              src: '',
            },
          ],
        },
      };
    },
    mounted(){
   
    },
    methods: {
      //预览功能
      preview() {
        console.log("preview");
      },
      //停止全部预览功能
      stopAllPreview() {},
      //关闭视频窗口
      closeWindow() {
      },
      // 查看摄像
      videoChange() {
        this.videoOpen = true;
        //生成1到3之间的随机整数
        let url = url // url地址
        this.playerOptions['sources'][0]['src'] = url;
      },
      // 关闭摄像头弹窗
      videoClose() {
        this.videoOpen = false;
        this.closeWindow();
      },
    },
  };
  </script>
  <style scoped lang="scss">
  .video_box {
    width: 100%;
    height: 100%;
  }
   
  .plugin {
    width: 100%;
    height: 100%;
  }
   
  .playWnd {
    width: 800px;
    height: 600px;
    margin: 0;
  }
   
  .video_box {
    ::v-deep .el-dialog__body {
      padding: 0 !important;
    }
  }
  </style>